const path = require('path');
const resolve = filePath => path.resolve(__dirname, './', filePath);
const { DefinePlugin } = require('webpack');

// process.env.NODE_ENV = 'production';

const port = '4001';
const globalComponentPrefix = 'pl';

const outputDir = 'micro-web-react-base';
const config = { publicPath: '/micro-web-react-base/', };

const _config = config;

module.exports = {
  publicPath:
  config.publicPath,
  outputDir: resolve(outputDir),
  lintOnSave: false,
  devServer: {
    port,
    client: {
      overlay: false
    },
    // disableHostCheck: true,                             // 关闭主机检查，使微应用可以被 fetch
    // headers: { "Access-Control-Allow-Origin": "*", },   // 因为应用之间需要互相加载，本地联调的时候需要配置跨域
  },
  pages: {
    index: {
      entry: resolve('src/main.tsx'),
      template: 'public/index.html',
      filename: 'index.html',
      title: 'react-base',
      chunks: ['chunk-vendors', 'chunk-common', 'index'],
    },
  },
  configureWebpack: {
    plugins: [
      new DefinePlugin({
        ENV: JSON.stringify(config),
        globalComponentPrefix: JSON.stringify(globalComponentPrefix),
        APP_ENV: JSON.stringify(require(resolve(`src/env/config/env.${process.env.APP_ENV || 'prod'}.js`)))
      }),
    ]
  },
  css: {
    sourceMap: false,
    loaderOptions: {
      sass: {
        additionalData: `$prefix:'${globalComponentPrefix}'; @import "src/styles/global.scss";`
      }
    },
  },
  chainWebpack(config) {
    config.plugins
      .delete('prefetch-index')
      .delete('preload-index');

    config
      .plugin('html-index')
      .tap((args) => {
        args[0].chunksSortMode = 'manual';
        return args;
      });

    config.resolve.alias
      .set('@', resolve('src'))
      .set('src', resolve('src'))
      .set('~', resolve('node_modules'))
      .set('@peryl/react-compose/src/index', resolve('abc'))
      // .set('@peryl/react-compose/src/index', resolve('abc'));
      .set('plain-design', resolve('node_modules/plain-design/src/packages/build.ts'))
      // .set('@peryl/react-compose', resolve('node_modules/@peryl/react-compose/src/index'))
      .set('@peryl/react-compose', resolve('node_modules/@peryl/react-compose/dist/peryl-react-compose.min.js'))
      // .set('plain-design', resolve('node_modules/plain-design/dist/plain-design.min.js'));

    /**
     * 使用mini-css-extract-plugin的时候，设置loader option中的publicPath，将相对路径改为publicPath，否则微前端加载的时候路径会不正确
     * @author  韦胜健
     * @date    2024.3.3 1:48
     */
    if (process.env.NODE_ENV === 'production') {
      const styles = ['css', 'postcss', 'scss', 'sass', 'less', 'stylus'];
      const modules = ['vue-modules', 'vue', 'normal-modules', 'normal'];
      styles.forEach(s => {
        modules.forEach(m =>
          config
            .module
            .rule(s)
            .oneOf(m)
            .use('extract-css-loader')
            .tap(options => {
              options.publicPath = _config.publicPath; // Set whatever you want as publicPath
              return options;
            })
        );
      });
    }
  },
};
